@page
@{ Layout = "_Layout"; }
@section Styles{
  <link href="/sitefiles/assets/css/bootstrap-4.1.0.min.css" rel="stylesheet" type="text/css" />
  <link href="/sitefiles/assets/css/siteserver.min.css" rel="stylesheet" type="text/css" />
}

<el-card style="margin: 10px;">
  <div slot="header" class="clearfix">
    <span>SS CMS 数据库升级向导</span>
  </div>

  <div class="m-t-20">

      <div v-if="pageType === 'prepare'">

        <ul class="nav nav-pills nav-fill bg-muted m-b-20">
          <li class="nav-item">
            <a class="nav-link active" href="javascript:;">升级准备</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="javascript:;">升级数据库</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="javascript:;">升级完成</a>
          </li>
        </ul>

        <div class="jumbotron text-center">
          <h4>欢迎来到SS CMS 数据库升级向导！</h4>
          <p>
            数据库版本：{{ databaseVersion }}，系统版本：{{ version }}
          </p>
          <p>
            升级向导将逐一检查数据库字段、将数据库结构更新至最新版本
          </p>
        </div>

        <hr />

        <div class="text-center">
          <input type="button" v-on:click="btnStartClick" value="开始升级" class="btn btn-primary">
        </div>
      </div>

      <div v-if="pageType === 'update'">
        <ul class="nav nav-pills nav-fill bg-muted m-b-20">
          <li class="nav-item">
            <a class="nav-link" href="javascript:;">升级准备</a>
          </li>
          <li class="nav-item">
            <a class="nav-link active" href="javascript:;">升级数据库</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="javascript:;">升级完成</a>
          </li>
        </ul>

        <div class="jumbotron text-center">
          <img class="mt-3" src="/sitefiles/assets/images/loading.gif" />
          <br />
          <br />
          <p class="lead">正在升级数据库，请稍后...</p>
        </div>
      </div>

      <div v-if="pageType === 'done'">
        <ul class="nav nav-pills nav-fill bg-muted m-b-20">
          <li class="nav-item">
            <a class="nav-link" href="javascript:;">升级准备</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="javascript:;">升级数据库</a>
          </li>
          <li class="nav-item">
            <a class="nav-link active" href="javascript:;">升级完成</a>
          </li>
        </ul>

        <div class="jumbotron text-center">
          <h4>数据库升级完成！</h4>
          <p class="mt-3">
            恭喜，您已经完成了 SS CMS 数据库的升级
            <a class="btn btn-success m-l-5" :href="utils.getIndexUrl()">进入后台</a>
          </p>
          <hr>
          <p class="mb-0">
            获取更多使用帮助请访问
            <a :href="getDocsUrl()" target="_blank">SS CMS 文档中心</a>
          </p>
        </div>
      </div>

  </div>

</el-card>

@section Scripts{
<script src="/sitefiles/assets/js/admin/syncDatabase.js" type="text/javascript"></script> }